<template>
    <div id="jifen">
        <div class="breadcrumb ">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <el-tag>会员管理</el-tag>
            </el-breadcrumb-item>
             <el-breadcrumb-item>
                <a href="http://localhost:8081/#/index/memberList"><el-tag>会员列表</el-tag></a>
              </el-breadcrumb-item>
             <el-breadcrumb-item>
                <el-tag>查看权限</el-tag>
              </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
         <div class="list">
                <el-table
                  :data="tableData"
                  style="width: 100%">
                  <el-table-column
                    label="用户id"

                    width="80">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{scope.row.uid}}</span>
                    </template>
                  </el-table-column>
                <el-table-column
                    label="用户名"
                    width="150">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{scope.row.username}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="是否采购员"
                    width="80">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.userleixing }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="是否具体升级会员条件"
                    width="180">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.vip}}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="">
                    <template slot-scope="scope">
                      <el-button
                        v-if="scope.row.vip==='是'"
                        size="mini"
                        type="primary"
                        @click="applyMem(scope.row.uid)">升级为会员</el-button>
                      <el-button
                         v-else
                        size="mini"
                        type="primary"
                        disabled>升级为会员</el-button>
                      <el-button
                        v-if="scope.row.userleixing==='是'"
                         disabled
                        size="mini"
                        type="danger">成为采购员</el-button>
                      <el-button
                        v-else
                        size="mini"
                        type="danger"
                         @click="applyCgy(scope.row.uid)">成为采购员</el-button>

                    </template>
                  </el-table-column>
                </el-table>
         </div>
    </div> 
</template>
<script>
     import { getUserInfo,getJifenJL,applyMem, applyCgy} from './../../../../service/api/index.js'
     export default{
       name:"GoodsList",
            data() {
              return {
                  tableData:[{uid:'',username:'',userleixing:'',vip:''}],
              }
            },
            
           
            
          
   
            mounted(){
             //   console.log(this.$route.query.token);
            },
            

            created(){

                     getUserInfo(this.$route.query.token).then((response)=>{
                      console.log(response);
                       if (response.success) {
                            this.tableData[0].uid = response.data.uid;
                            this.tableData[0].username = response.data.username;
                            if (response.data.userleixing===1) {
                               this.tableData[0].userleixing = '是';
                           }else{
                             this.tableData[0].userleixing = '否';
                           };
                          
                       }
                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch
 
                //积分记录大于10，有成为超级会员的条件
                 getJifenJL(this.$route.query.token).then((response)=>{
                       console.log(response);
                       if (response.success) {
                           let count1 = response.count1;
                           let count2 = response.count2;
                            if (count1>=10&&count2===0) {
                                this.tableData[0].vip='是';
                            }else{
                              this.tableData[0].vip='否';
                            }
                       }
                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch





            }, // ----created

            methods:{
                 async applyMem(uid){
                      let res = await applyMem(uid);
                      console.log(res);
                      if (res.status===200) {
                           this.$message({
                              message: '升级会员成功',
                              type: 'success'
                            });
                           window.location.reload();
                      }

                 },
                 async applyCgy(uid){
                      let res = await applyCgy(uid);
                     console.log(res);
                      if (res.status===200) {
                           this.$message({
                              message: '成为采购员成功',
                              type: 'success'
                            });
                           window.location.reload();
                      }
                 }

            }
     }
    
</script>
<style lang="less" scope>
   #jifen{
     width:100%;
     height:100%;
     background-color:#f5f5f5;
     z-index: 99;
     position: absolute;
     top:0.1px;
     right:1px;
   }
   .breadcrumb {
     margin-right: 0.2rem;
     margin-left: 0.2rem;
     margin-top: 0.1rem;
     margin-bottom: 0.1rem;
     background-color:white;
     padding: 0.06rem;
     height:0.6rem;
     border-radius: 4px
   }
   .list{
     margin-left: 2rem;
     margin-right: 2rem;
   }
</style>